<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Badge 徽章"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="基础用法">
      <hips-badge
        value="10"
        max="5"
        class="icon-class"
      >
        <button class="btn-class">
          回复
        </button>
      </hips-badge>
      <hips-badge
        value="10"
        type="primary"
        class="icon-class"
      >
        <button class="btn-class">
          评论
        </button>
      </hips-badge>
      <hips-badge
        value="10"
        type="warn"
        class="icon-class"
      >
        <button class="btn-class">
          查询
        </button>
      </hips-badge>
    </demo-block>

    <demo-block title="最大值">
      <hips-badge
        value="100"
        max="99"
        size="small"
        class="icon-class"
      >
        <button class="btn-class">
          回复
        </button>
      </hips-badge>
      <hips-badge
        :value="99"
        :max="10"
        class="icon-class"
      >
        <button class="btn-class">
          评论
        </button>
      </hips-badge>
    </demo-block>

    <demo-block title="自定义内容">
      <hips-badge
        value="add"
        color="#eee"
        class="icon-class"
      >
        <button class="btn-class">
          回复
        </button>
      </hips-badge>
      <hips-badge
        value="new"
        color="#666"
        class="icon-class"
      >
        <button class="btn-class">
          评论
        </button>
      </hips-badge>
    </demo-block>

    <demo-block title="小红点">
      <hips-badge
        dot
        class="icon-class"
      >
        <span>查询</span>
      </hips-badge>
      <hips-badge
        dot
        class="icon-class"
      >
        <hips-icon name="el-icon-star-off" />
      </hips-badge>
    </demo-block>

    <demo-block title="其他用法">
      <hips-group>
        <hips-cell
          title="单元格"
          is-link
        >
          <hips-badge
            slot="value"
            :value="data4"
            size="small"
          />
        </hips-cell>
      </hips-group>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Badge, Group, Cell,Icon } from '@hips/vue-ui';

export default {
  components: {
    [Badge.name]: Badge,
    [Group.name]: Group,
    [Cell.name]: Cell,
    [Icon.name]: Icon,
  },
  mixins: [ BasicView ],
  data() {
    return {
      data1: 10,
      data2: 99,
      data3: 100,
      data4: 20,
    };
  },
};
</script>

<style scoped lang="stylus">
>>> .demo-block {
    .wrapper {
        padding 10px
    }
}

.icon-class{
    margin-top: 10px;
    margin-left:10px;
    margin-right: 40px;
}
.btn-class{
    border-radius: 4px;
    height: 30px;
    line-height: 30px;
    width: 65px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #e3e3e3;
    padding: 0px;
    background: white;
    outline: none;
}
</style>
